<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-10 19:57:02
-->
<template>
    <!-- 右侧菜单 -->
    <div
        class="absolute right-0 flex items-center w-56 h-full justify-evenly text-common-text-color"
    >
        <div
            class="w-8 border rounded-sm text-11 border-common-text-color flex-c-c hover:border-main-text-color hover:text-main-text-color trans"
        >极高</div>
        <div title="音效 暂未开发">
            <SvgIcon name="soundEffect-icon" size="16" hover title="123" />
        </div>
        <a-popover trigger="hover" placement="top" :color="bgColor">
            <div title="音量">
                <SvgIcon name="voice-icon" size="19" hover />
            </div>
            <template #content>
                <div class="inline-block w-8 h-32 py-3">
                    <a-slider
                        v-model:value="volume"
                        :max="1"
                        :step="0.01"
                        vertical
                        :tooltipVisible="false"
                    />
                </div>
            </template>
        </a-popover>
        <div title="一起听 暂未开发">
            <SvgIcon name="toggther.icon" size="19" hover />
        </div>
        <div title="播放列表" @click.stop="showPlayList = !showPlayList">
            <SvgIcon name="playlist-icon" size="18" hover />
        </div>
        <Transition name="slide-fadeX">
            <div ref="playListRef" class="playList trans" v-show="showPlayList">
                <div class="mb-2 bg-main-bg-color trans">
                    <p
                        class="flex items-center h-12 pl-4 text-lg font-bold text-main-text-color"
                    >当前播放</p>
                    <p class="flex justify-between px-4 text-12 text-sub-text-color">
                        <span>总共{{ playStore.playList.length }}首</span>
                        <span
                            class="cursor-pointer text-link-color"
                            @click="playStore.setPlayList([])"
                        >清空列表</span>
                    </p>
                </div>
                <MyTable
                    :tableData="playStore.playList"
                    :columns="columns"
                    :showDefaultColumn="false"
                    :showTHead="false"
                >
                    <template #name="{ scope }">
                        <div
                            class="flex items-center pl-4 cursor-pointer playList-name"
                            :data-isActive="scope.id === playStore.songId"
                        >
                            <SvgIcon
                                name="playing-vioice-icon"
                                size="22"
                                v-if="scope.id === playStore.songId"
                                class="transform -translate-x-2 translate-y-0.5"
                            />
                            <span v-html="getSongName(scope.name, scope.alia)"></span>
                        </div>
                    </template>
                    <template #singer="{ scope }">{{ getSingers(scope.ar) }}</template>
                    <template #time="{ scope }">{{ getSongTime(scope.dt) }}</template>
                </MyTable>
            </div>
        </Transition>
    </div>
</template>

<script lang='ts' setup>
import { computed, ref, watch } from 'vue';
import SvgIcon from '../svgIcon/svgIcon.vue';
import { usePlayStore } from '@/store/play'
import MyTable from '../table/myTable.vue';
import { IColumn } from '../table/types';
import { IAllObject } from '@/types/base';
import { useSettingStore } from '@/store/setting'
import { usePlay } from '@/hooks/play/usePlay';
import { useSong } from '@/hooks/song/useSong';
import { bgColorEnum } from '@/types/design/popoverType';


const playStore = usePlayStore()
const settingStore = useSettingStore()
const { playMusic } = usePlay()
const { getSongName, getSingers, getSongTime } = useSong()

// 气泡背景颜色
const bgColor = computed(() => settingStore.isDark ? bgColorEnum.DARK : bgColorEnum.LIGHT)

// 设置音量
const volume = ref(playStore.volume)
watch(() => volume.value, newVal => playStore.setVolume(newVal))

// 点击歌曲名称,播放音乐
const titleClick = (row: IAllObject) => {
    playMusic(row.id)
}

// 是否展示播放列表
const showPlayList = ref(false)
const playListRef = ref(null as unknown as HTMLElement)
watch(() => showPlayList.value, newVal => {
    const handleClick = (e: Event) => {
        const isContains = playListRef.value.contains(e.target as unknown as HTMLElement)
        if (!isContains) showPlayList.value = false
    }
    if (newVal) {
        // 监听点击事件,若点击区域发生在播放列表外，则关闭播放列表
        document.addEventListener('click', handleClick)
    } else {
        document.removeEventListener('click', handleClick)
    }
})

// 表格
const columns: IColumn[] = [
    {
        label: '标题',
        prop: 'name',
        flex: 3,
        class: 'text-main-text-color',
        dbClick: titleClick
    },
    {
        label: '歌手',
        prop: 'singer',
        flex: 2
    },
    {
        label: '时长',
        prop: 'time',
        flex: 1
    }
]
</script>

<style scoped lang='scss'>
.ant-slider {
    &:deep(.ant-slider-track) {
        background-color: $theme-color !important;
    }
    &:deep(.ant-slider-handle) {
        border-color: $theme-color !important;
    }
}
.playList {
    @apply absolute bg-main-bg-color overflow-y-scroll;
    bottom: $playBar-height;
    right: 0;
    width: 415px;
    height: calc(100vh - $navbar-height - $playBar-height);
    box-shadow: -2px 0px 0px rgba($color: #000000, $alpha: 0.05);

    .playList-name[data-isActive="true"] {
        color: $theme-color;
        &:deep(.text-common-text-color) {
            color: $theme-color!important;
        }
    }
}
</style>